<template>
	<view>
		<!-- 全屏加载 -->
		<cover-bulr-bg v-if="coverBulr"></cover-bulr-bg>

		<!-- 密码访问 -->
		<block v-if="protected">
			<common-pass @passTap="emitPass" :isError="isError" :getPass="getPass" :public_name="wxSet.public_name"
				:public_key="detailData.public_key" :public_step="public_step"></common-pass>
		</block>

		<view class="index-ov" v-else>
			<view class="article-container">
				<!-- 标题 -->
				<view class="titel-h-w">
					<view class="titel-h">
						{{ detailData.title.rendered }}
					</view>
				</view>

				<!-- 时间和装饰品 -->
				<view class="time-view">
					<view class="time-font">
						发表于：{{ detailData.en_md_date }}
					</view>
					<view class="time-font">
						阅读：{{ detailData.post_views ? detailData.post_views : 0 }}
					</view>
				</view>

				<!-- 正文内容 -->
				<view class="data-view ">
					<mp-html :tag-style="tag_style" :content="detailData.content.rendered"
						:container-style="container_style" :copy-link="copyLink" selectable="true">
						内容疯狂加载ing...</mp-html>
				</view>

				<!-- 隐藏内容 -->
				<view v-if="detailData.fr_hide != ''">
					<view class="hide-img">
						<image src="/static/data/hide.png" mode="widthFix" class="fengrui-img"></image>
						<view class="" style="position: absolute;left: 20rpx;top: 20rpx;">
							<view class="hide-title">
								查看隐藏内容
							</view>
							<view class="hide-desrc">
								闲庭落花，如云般轻盈
							</view>
						</view>
					</view>
					<view class="hide-content">
						<view class="hide-data">
							<mp-html :tag-style="tag_style" :content="detailData.fr_hide"
								:container-style="container_style" :copy-link="copyLink" selectable="true">
								隐藏内容ing...</mp-html>
						</view>
					</view>
				</view>

				<view v-if="wxSet.wx_video != ''" class="video-ad-container ">
					<ad :unit-id="wxSet.wx_video" ad-type="video" ad-theme="white"></ad>
				</view>

				<!-- 猜你想搜 -->
				<block v-if="posTagsList != ''">
					<view class="titel-felx ">
						<view class="time-img pulse-animation">
							<image class="fengrui-img" src="../../static/my/star.svg" mode=""></image>
						</view>
						<view class="titel-h-go">
							相关文章
						</view>
					</view>

					<!-- 列表 -->
					<view class="list-container">
						<view class="list-li animate-slide-in" v-for="(item, index) in posTagsList" :key="index"
							:style="{ 'animation-delay': index * 0.1 + 's' }" @click="posTap(item)"
							hover-class="item-hover">
							<view class="list-img">
								<image class="fengrui-img" :src="item.thumbnailurl" mode="aspectFill"></image>
							</view>
							<view class="list-li-left">
								<view class="list-li-left-h">
									{{ item.title.rendered }}
								</view>
								<view class="list-li-left-describe">
									<view class="recommend-badge">推选阅读</view>
								</view>
							</view>
						</view>
					</view>
				</block>


				<!-- 支撑顶部高度 -->
				<view style="height: 140rpx;"></view>
				<!-- 文章列表没有数据 -->
				<view class="no-list-data " v-if="no_list_data">
					--我的底线就到这里了--
				</view>
			</view>

			<!-- 提问转发 -->
			<view class="cove-bom">
				<view class="cover-list-view">
					<view class="fr-btn" @tap="showSubscribeMessage()" v-if="wxSet.if_subscribe == 1">
						<i class="animation"></i>订阅最新内容<i class="animation"></i>
					</view>
					<view class="cover-quest" @tap="tarBlack()" v-else>
						返回上级
					</view>

					<button class="cover-list-btn" open-type="contact" :send-message-title="detailData.title.rendered"
						:send-message-path="posUrl" show-message-card="true">
						<view class="cover-list-icon">
							<image class="fengrui-img" src="../../static/my/customer.svg" mode="aspectFit">
							</image>
						</view>
						<view class="cover-list-font ma-top-0">咨询客服</view>
					</button>

					<view v-if="detailData.fr_down_url != '' || detailData.fr_down_file != ''">
						<view class="cover-list-icon" @tap="downloadTap()">
							<image class="fengrui-img" src="../../static/data/down.svg" mode="aspectFit">
							</image>
						</view>
						<view class="cover-list-font">资源下载</view>
					</view>

					<button class="cover-list-btn" open-type="share">
						<view class="cover-list-icon" style="height: 58rpx;">
							<image class="fengrui-img" src="../../static/data/share.svg" mode="aspectFit">
							</image>
						</view>
						<view class="cover-list-font">分享</view>
					</button>
				</view>
			</view>
		</view>

		<!-- 广告弹窗 -->
		<showPrivacyAd v-if="isAdPopup" @getVideoAd="getVideoAd" @tarBlack="tarBlack" :adNumber="adNumber">
		</showPrivacyAd>

		<!-- 前往小程序使用完整服务 -->
		<cover-guide v-if="isGuide"></cover-guide>
	</view>
</template>

<script>
	// 获取应用实例
	const app = getApp()
	import * as API from "../../utils/api";
	import mpHtml from '@/components/mp-html/mp-html';
	// 导入订阅消息工具类
	import SubscribeMessage from '@/utils/subscribeMessage';
	let rewardedVideoAd = null;
	export default {
		components: {
			mpHtml
		},
		data() {
			return {
				// 全屏加载
				coverBulr: true,
				no_list_data: false,
				// 文章ID
				posdCenterID: '',
				// 页面路径
				posUrl: '',
				// 基本配置
				wxSet: [],
				launchScene: 0, //微信小程序场景值
				// 评论
				XuMessageList: [],
				// 文章详情
				detailData: [],
				isGuide: false, //前往小程序使用完整服务
				// 页码
				page: 1,
				// 当前时间戳和
				postDaySum: 0,
				postAdKey: [],


				// 文本框解析
				tag_style: {
					h1: 'border-top:1px solid rgb(0 0 141 / 12%);margin:48px 0 16px;padding-top:24px;line-height:32px;font-size:18px;font-weight: 600;',
					h2: 'border-top:1px solid rgb(0 0 141 / 12%);margin:48px 0 16px;padding-top:24px;line-height:32px;font-size:18px;font-weight: 600;',
					h3: 'border-top:1px solid rgb(0 0 141 / 12%);margin:48px 0 16px;padding-top:24px;line-height:32px;font-size:18px;font-weight: 600;',
					h4: 'border-top:1px solid rgb(0 0 141 / 12%);margin:48px 0 16px;padding-top:24px;line-height:32px;font-size:18px;font-weight: 600;',
					img: 'max-width: 100%; border-radius: 8px; margin: 16px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.1);',
					p: 'margin: 16px 0; line-height: 1.8;',
					a: 'color: #4b75ff; text-decoration: none;',
					blockquote: 'border-left: 4px solid #4b75ff; padding-left: 16px; margin: 16px 0; color: #666;',
					code: 'padding: 2px 4px; border-radius: 4px; font-family: monospace;'
				},
				container_style: 'font-size:16px;overflow-x: hidden;line-height:1.8;letter-spacing:1px;',
				copyLink: false,
				// 相关文章
				posTagsList: [],

				// 密码访问
				protected: true,
				isError: 'suss',
				getPass: '',
				public_step: false,

				// 广告次数控制
				adViewCount: 0,
				requiredAdViews: 1,
				adNumber: 0,
				isAdPopup: false,

				// 消息订阅
				templateId: '',
				openID: '',
				statusMessage: '',
			}
		},
		// 分享好友配置
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				// console.log(res.target)
			}
			return {
				title: this.detailData.title.rendered,
				imageUrl: this.detailData.thumbnailurl,
				path: '/pages/data/data?id=' + this.posdCenterID
			}
		},
		// 文章分享盆友圈 目前支持安卓
		onShareTimeline(res) {
			return {
				title: this.detailData.title.rendered,
				imageUrl: this.detailData.thumbnailurl,
				path: '/pages/data/data?id=' + this.posdCenterID
			}
		},
		// 监听触底----上啦刷新
		onReachBottom() {
			this.page = this.page + 1;
		},
		onLoad(posID) {
			// 接受数据
			this.posdCenterID = posID.id;

			//判断是否扫码打开
			if (posID.scene) {
				this.posdCenterID = posID.scene;
			}

			// 接受数据
			this.posUrl = 'pages/data/data?id=' + posID.id;

			// 获取当前时间戳
			const now = new Date();
			const year = now.getFullYear();
			const month = now.getMonth() + 1; // 月份从 0 开始，需加 1
			const day = now.getDate();
			const postDaySum = year + month + day;
			this.postDaySum = postDaySum;

			if (app.globalData.wxSet == '') {
				//（解决异步）
				app.on('wxSet', this.changeToken.bind(this));
			} else {
				this.wxSet = app.globalData.wxSet;
				this.launchScene = app.globalData.launchScene; //微信小程序场景值
				// 文章数据
				this.posdData();

			}

			// 微信分享盆友圈
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		methods: {
			//（解决异步）
			changeToken() {
				this.wxSet = app.globalData.wxSet;
				this.launchScene = app.globalData.launchScene; //微信小程序场景值
				// 文章数据
				this.posdData();
			},

			// 文章数据
			posdData() {
				API.getInfo([this.posdCenterID]).then((res) => {
					this.detailData = res.data;
					this.posTag = res.data.tags[0];
					this.protected = res.data.content.protected; //密码访问
					this.coverBulr = false;

					if (this.wxSet.public_step != "") { //判断教程
						this.public_step = true;
					}
					if (this.protected == false) { // 广告缓存判断
						this.infoAdJudge();
					}
					this.infoPassJudge(); // 密码缓存判断
					// 检测是否有标签和热门文章
					if (res.data.tags == '' || res.data.tags[0] == undefined) {
						// console.log('该文章没有设置标签，请注意wordpress后天文章标签设置')
						this.no_list_data = true;
					} else {
						this.tagList(res.data.tags[0]); // 热门文章
					};


				})
			},

			// 密码访问
			emitPass(pass) {
				API.getInfoPass(this.posdCenterID, pass).then((res) => {
					// console.log('文章密码详情', res.statusCode)
					if (res.statusCode != 200) {
						this.isError = 'err';
					} else {
						this.setPass(pass); //密码缓存
						this.detailData = res.data;
						this.posTag = res.data.tags[0];
						this.protected = false; //密码访问
						// 检测是否有标签和热门文章
						if (res.data.tags == '' || res.data.tags[0] == undefined) {
							// console.log('该文章没有设置标签，请注意wordpress后天文章标签设置')
							this.no_list_data = true;
						} else {
							this.tagList(res.data.tags[0]); // 热门文章
						};
						this.infoAdJudge(); // 广告缓存判断
					}
				})
			},

			// 广告缓存公告判断
			infoAdJudge() {
				// 获取激励视频缓存
				const postAdKey = uni.getStorageSync('post_adkey');
				if (this.wxSet.ad_time == '1') {
					// 查找缓存数据
					if (postAdKey) {
						const foundItem = postAdKey.find(item => item.id === this.posdCenterID)
						// console.log(foundItem,'查找缓存数据')
						if (foundItem) {
							if (foundItem.time != this.postDaySum) { // 缓存时间大于或不等于
								this.starpAd();
							} else {
								// 独立文章公告弹窗
								if (this.detailData.pos_notice != '') {
									uni.showModal({
										title: '公告',
										content: this.detailData.pos_notice,
									});
								}
							}
						} else {
							this.starpAd(); // 没有缓存 初始化广告
						}
					} else {
						this.starpAd(); // 没有缓存 初始化广告
					}
				} else {
					this.starpAd();
				}
			},

			// 密码缓存判断
			infoPassJudge() {
				// console.log(postDaySum, '获取当前时间戳');
				// 获取激励视频缓存
				const passKey = uni.getStorageSync('pass_adkey');
				// 查找缓存数据
				if (passKey) {
					const foundItem = passKey.find(item => item.id === this.posdCenterID)
					// console.log(foundItem,'查找缓存数据')
					if (foundItem) {
						if (foundItem.time == this.postDaySum) { // 缓存时间大于或等于
							// console.log(foundItem.pass,'缓存密码')
							this.getPass = foundItem.pass;
						}
					}
				}
			},

			// 初始化广告
			starpAd() {
				if (this.launchScene == 1154) {
					this.isGuide = true;
					return;
				}
				
				if (this.wxSet.if_subscribe == 1) { // 判断是否开启订阅消息
					API.getSubscribeTemplate().then((res) => {
						this.templateId = res.data.template_id;
						if (this.wxSet.if_subscribe_popup == 1) {
							setTimeout(() => {
								this.showSubscribeMessage();
							}, 1500);
						}
					})
				}

				if (this.wxSet.wx_jili_video != '' && this.detailData.fr_videp_if == '1') {
					this.requiredAdViews = this.detailData.ad_number && this.detailData.ad_number > 0 ? this.detailData
						.ad_number : 1;
					this.adViewCount = 0;
					this.adNumber = this.requiredAdViews;
					this.CreateAd();
					this.videoAD();
				}
			},

			// 热门文章
			tagList(posTag) {
				API.getTagsList([posTag]).then((res) => {
					this.posTagsList = res.data;
					// console.log('热门文章', res.data)
				})
			},

			// 资源点击
			downloadTap() {

				// 前往付费文章下载适配页
				if (this.detailData.red_pay == "1") {
					uni.navigateTo({
						url: '../download-pay/download-pay?id=' + this.posdCenterID,
						fail(err) {
							uni.showToast({
								title: "打开失败，请检查是否有该文件"
							})
						}
					})
					return
				}

				// 默认跳转
				uni.navigateTo({
					url: '../download/download?id=' + this.posdCenterID
				})
			},

			// 点击跳转
			posTap(e) {
				switch (e.pos_read) {
					case '':
						uni.navigateTo({
							url: '../data/data?id=' + e.id,
						})
						break;
					case '0':
						uni.navigateTo({
							url: '../data/data?id=' + e.id,
						})
						break;
					case '1':
						uni.navigateTo({
							url: '../weblist/weblist?aurl=' + e.account_url,
						});
						break;
					case '2':
						uni.navigateTo({
							url: '../download/download?id=' + e.id,
						});
						break;
					case '3':
						uni.openChannelsActivity({
							finderUserName: e.wxvideo_id,
							feedId: e.wxvideo_feedid,
							success: (res) => {},
							fail: (err) => {
								console.log(err)
							}
						})
						break;
					case '4':
						const aid = e.bz_video_av
						const timestamp = new Date().getTime()
						const path =
							`pages/video/video?__preload_=${timestamp * 10 + 3}&__key_=${timestamp * 10 + 4}&avid=${aid}`
						wx.navigateToMiniProgram({
							appId: 'wx7564fd5313d24844',
							path,
							success: res => {
								console.log('跳转成功')
							}
						})
						break;
				}
			},

			//初始化激励视频广告组件
			CreateAd() {
				// 关闭加载弹窗（即使请求失败也需要关闭，避免一直显示加载状态）
				if (this.wxSet.wx_jili_video != '') {
					if (wx.createRewardedVideoAd) {
						this.videoAd = wx.createRewardedVideoAd({
							adUnitId: this.wxSet.wx_jili_video
						})
						this.videoAd.onLoad(() => {})
						this.videoAd.onError((err) => {
							console.log(err)
							// 播放错误下发奖励
							wx.showToast({
								icon: 'none',
								title: "错误码：" + err.errCode
							})
							this.isAdPopup = false;
							if (this.wxSet.if_subscribe_popup == 1 && this.wxSet.if_subscribe == 1) {
								setTimeout(() => {
									this.showSubscribeMessage();
								}, 1500);
							}
						})
						this.videoAd.onClose((res) => {
							if (res && res.isEnded) {
								this.adViewCount++;
								if (this.adViewCount >= this.requiredAdViews) {
									uni.showToast({
										icon: 'none',
										title: "感谢您的支持"
									})
									this.isAdPopup = false;
									if (this.wxSet.if_subscribe_popup == 1 && this.wxSet.if_subscribe == 1) {
										setTimeout(() => {
											this.showSubscribeMessage();
										}, 1500);
									}
									// 设置广告缓存
									if (this.wxSet.ad_time == '1') {
										this.setRead();
									}
								} else {
									this.adNumber = this.requiredAdViews - this.adViewCount
								}
							} else {
								uni.showToast({
									icon: 'none',
									title: "中途关闭广告"
								})
								this.tarBlack();
							}
						})
					}

				}
			},

			// 流量主视频弹窗
			videoAD() {
				this.isAdPopup = true;
			},

			// 激励视频
			getVideoAd() {
				// 用户触发广告后，显示激励视频广
				if (this.videoAd) {
					this.videoAd.show().catch(() => {
						// 失败重试
						this.videoAd.load()
							.then(() => this.videoAd.show())
							.catch(err => {
								console.log('激励视频', err)
							})
					})
				}
			},

			// 设置广告缓存
			setRead() {
				var postAdKey = uni.getStorageSync('post_adkey');
				if (postAdKey == '') {
					var postAdKey = [];
				}
				// 检测事否存在ID
				var isItem = postAdKey.find(item => item.id === this.posdCenterID);
				// 如果有更新ID,若没有新增ID
				if (isItem) {
					const updateData = (id, newData) => {
						postAdKey = postAdKey.map(item => {
							if (item.id === id) {
								return {
									...item,
									...newData
								};
							}
							return item;
						});
					};
					updateData(this.posdCenterID, {
						time: this.postDaySum,
					});
				} else {
					var jlis = postAdKey.unshift({
						id: this.posdCenterID,
						time: this.postDaySum,
					})
				}
				uni.setStorageSync('post_adkey', postAdKey);
				// console.log(postAdKey)
			},

			// 设置密码缓存
			setPass(e) {
				var passKey = uni.getStorageSync('pass_adkey');
				if (passKey == '') {
					var passKey = [];
				}

				// 检测事否存在ID
				var isItem = passKey.find(item => item.id === this.posdCenterID);
				// 如果有更新ID,若没有新增ID
				if (isItem) {
					const updateData = (id, newData) => {
						passKey = passKey.map(item => {
							if (item.id === id) {
								return {
									...item,
									...newData
								};
							}
							return item;
						});
					};
					updateData(this.posdCenterID, {
						time: this.postDaySum,
					});
				} else {
					var jlis = passKey.unshift({
						id: this.posdCenterID,
						time: this.postDaySum,
						pass: e,
					})
				}
				uni.setStorageSync('pass_adkey', passKey);
				// console.log(passKey)
			},

			// 左上角返回按钮
			tarBlack: function() {
				// 建立页面栈 如果是1则是分享打开需要返回主页，大于1则返回上一级
				var selPage = getCurrentPages();
				// console.log(selPage.length)
				if (selPage.length == 1) {
					uni.switchTab({
						url: "../index/index"
					})
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},


			// 弹窗订阅
			showSubscribeMessage() {
				SubscribeMessage.showSubscribeMessage(this.templateId, () => {
					// 订阅成功后的回调处理
					this.statusMessage = '订阅成功！';
				});
			},
		}
	}
</script>

<style scoped>
	/* 隐藏内容 */
	.hide-title {
		color: #ffffff;
		font-size: 46rpx;
		font-weight: bold;
		font-style: italic;
	}

	.hide-desrc {
		color: #ffffff;
		font-size: 28rpx;
		margin-top: 10rpx;
	}

	.hide-img {
		height: 140rpx;
		position: relative;
	}

	.hide-content {
		padding: 6rpx 20rpx 20rpx 20rpx;
		border-radius: 0 0 32rpx 32rpx;
		background: linear-gradient(180deg, rgba(25, 225, 136, 1) 0%, rgba(2, 187, 184, 1) 100%);
	}

	.hide-data {
		background-color: #ffffff;
		padding: 28rpx;
		border-radius: 40rpx;
	}

	/* 脉冲动画 */
	.pulse-animation {
		animation: pulse 2s infinite;
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.05);
		}

		100% {
			transform: scale(1);
		}
	}

	/* 点击反馈 */
	.btn-hover {
		opacity: 0.8;
		transform: scale(0.98);
		transition: all 0.2s ease;
	}

	.item-hover {
		background-color: rgba(0, 0, 0, 0.03);
		transition: all 0.3s ease;
	}

	.btn-active {
		animation: btnPress 0.2s ease;
	}

	.item-active {
		animation: itemPress 0.3s ease;
	}

	@keyframes btnPress {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(0.96);
		}

		100% {
			transform: scale(1);
		}
	}

	@keyframes itemPress {
		0% {
			background-color: transparent;
		}

		50% {
			background-color: rgba(75, 117, 255, 0.1);
		}

		100% {
			background-color: transparent;
		}
	}

	/* 文章容器 */
	.article-container {
		padding: 0 20rpx;
	}

	/* 标题样式 */
	.titel-h-w {
		margin: 70rpx 30rpx 30rpx 30rpx;
	}

	.titel-h {
		font-size: 42rpx;
		font-weight: bold;
		line-height: 1.4;
		position: relative;
		padding-bottom: 30rpx;
	}

	.titel-h::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 80rpx;
		height: 6rpx;
		background: linear-gradient(90deg, #4b75ff, #83a4ff);
		border-radius: 3rpx;
	}

	/* 正文内容优化 */
	.data-view {
		margin: 30rpx 20rpx;
		font-size: 34rpx;
		color: #333232;
		line-height: 1.8;
		word-wrap: break-word;
	}

	/* 视频广告容器 */
	.video-ad-container {
		width: 94%;
		padding-left: 3%;
		margin-top: 50rpx;
		margin-bottom: 30rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	/* 相关文章标题 */
	.titel-felx {
		display: flex;
		align-items: center;
		padding: 28rpx;
		margin-top: 20rpx;
	}

	.time-img {
		width: 36rpx;
		height: 36rpx;
	}

	.titel-h-go {
		font-size: 32rpx;
		margin-left: 20rpx;
		font-weight: 600;
	}

	/* 相关文章列表容器 */
	.list-container {
		/* padding: 10rpx 20rpx; */
	}

	/* 相关文章列表项 */
	.list-li {
		display: flex;
		margin: 20rpx 28rpx;
		align-items: center;
		transition: all 0.3s ease;
		padding: 20rpx;
		border-radius: 40rpx;
	}

	.list-li:active {
		transform: scale(0.98);
	}

	.list-img {
		height: 120rpx;
		width: 140rpx;
		border-radius: 12rpx;
		overflow: hidden;
		flex-shrink: 0;
	}

	.list-li-left {
		margin-left: 24rpx;
		flex-grow: 1;
		height: 116rpx;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
	}

	.list-li-left-h {
		font-size: 24rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: 1.4;
	}

	.list-li-left-describe {
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.recommend-badge {
		font-size: 22rpx;
		color: #4b75ff;
		background-color: rgba(75, 117, 255, 0.1);
		padding: 4rpx 16rpx;
		border-radius: 40rpx;
	}

	/* 底部操作栏 */
	.cove-bom {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		width: 100%;
		z-index: 1025;
		background-color: #fff;
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
		border-radius: 40rpx 40rpx 0 0;
	}

	.cover-list-view {
		margin: 20rpx 0;
		height: 110rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.cover-quest {
		border-radius: 100rpx;
		height: 74rpx;
		line-height: 74rpx;
		width: 24%;
		background-color: #f3f3f3;
		color: #b7b7b7;
		font-size: 24rpx;
		text-align: center;
	}

	.cover-list-icon {
		height: 64rpx;
		width: 64rpx;
		display: block;
		margin: auto;
		transition: all 0.3s ease;
	}

	.cover-list-btn {
		margin: 0rpx;
		padding: 0rpx;
		background-color: unset;
		line-height: unset;
	}

	.cover-list-font {
		color: #999;
		font-size: 22rpx;
		text-align: center;
		margin-top: 6rpx;
	}

	/* 列表没有数据 */
	.no-list-data {
		text-align: center;
		margin: 30rpx 0px;
		color: #ADADAD;
		font-size: 24rpx;
		padding: 20rpx 0;
	}

	button:after {
		border: 0px solid rgba(0, 0, 0, .2);
	}

	/* 富文本解析视频宽度 */
	.video {
		width: 100% !important;
	}

	/* 暗黑模式 */
	@media (prefers-color-scheme: dark) {

		page,
		.data-login-flex,
		.tar-w,
		.back-radius,
		.tar-t,
		.cove-bom {
			background: #161616;
		}

		.data-view,
		.titel-h {
			color: #e0e0e0 !important;
		}

		.list-li {
			background-color: rgba(40, 40, 40, 0.6);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		}

		.hide-data {
			background: #202020;
		}

		.cover-quest {
			background-color: #252525;
			color: #83a4ff;
		}

		.item-hover {
			background-color: rgba(255, 255, 255, 0.05);
		}

		.item-active {
			animation: darkItemPress 0.3s ease;
		}

		@keyframes darkItemPress {
			0% {
				background-color: transparent;
			}

			50% {
				background-color: rgba(75, 117, 255, 0.15);
			}

			100% {
				background-color: transparent;
			}
		}

		.recommend-badge {
			background-color: rgba(75, 117, 255, 0.2);
		}

		.loading-text {
			color: #777;
		}

		.loading-spinner {
			border: 4rpx solid #333;
			border-top: 4rpx solid #4b75ff;
		}
	}
</style>